<!-- 所有VIP级别 -->
<template>
	<view class="hdtybox" :class="hdc">
		<topboxVue :tit="$t('hd.bt13')"></topboxVue>
		<view class="v2box">


			<view class="v2box-ib" v-for="item in list">

				<view class="bj_between mb20">
					<view class="bj_left">
						<image :src="common.websiteUrl + item.pic" class="v2box-ib-djpic"></image>
						<view class="">
							<view class="f24 cy mb10">
								{{$t("v1.v1")}}
							</view>
							<view class="mb30">
								{{$t("v2.st1")}}{{$t("menu.$")}} {{item.next_level_need_betting}}
							</view>
							<view class="v2box-ib-jdt">
								<view class="v2box-ib-jdt-mt" :style="'width: '+item.betting_percent+'%;'"></view>
							</view>
						</view>
					</view>
					<view class="v2box-ib-btn1 bj_sx">
						<view class="bj_left">
							<image src="/static/hd/ico6.png" class="v2box-ib-lwpic"></image>
							<text>{{$t("vip.btn")}}</text>
						</view>
						<view class="">
							{{$t("menu.$")}} {{item.upgrade_bonus}}
						</view>
					</view>
				</view>

				<view class="tc f24 mb30">
					{{$t("vip.gs")}}{{item.upgrade_bonus}}%
				</view>
				<view class="v2box-ib-infobox">
					<view class="f30 fwb mb20">
						{{$t("v2.tit1")}}
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit1.s1")}}
						</view>
						<view>
							{{item.withdraw_fee}}%
						</view>
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit1.s2")}}
						</view>
						<view>
							{{item.withdraw_daily_times}}
						</view>
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit1.s3")}}
						</view>
						<view>
							{{item.withdraw_daily_limit}}
						</view>
					</view>
					<view class="v2box-ib-infobox-fgx mb20"></view>
					<view class="f30 fwb mb20">
						{{$t("v2.tit2")}}
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit2.s1")}}
						</view>
						<view class="cy">
							{{item.cashback_rate}}%
						</view>
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit2.s2")}}
						</view>
						<view>
							{{item.daily_rate}}
						</view>
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit2.s3")}}
						</view>
						<view class="cy">
							{{item.weekly_rate}}%
						</view>
					</view>
					<view class="bj_between mb20">
						<view class="ca2">
							{{$t("v2.tit2.s4")}}
						</view>
						<view>
							{{item.monthly_rate}}%
						</view>
					</view>
				</view>

			</view>


		</view>
		<bottomVue></bottomVue>
	</view>
</template>

<script setup>
	import {
		ref,
		inject,
		provide
	} from 'vue';
	import topboxVue from '../common/topbox.vue';
	import useI18n from '@/store/useI18n.js'
	import bottomVue from "../common/bottom-slotsbr.vue";
	import common from '../../js/common';
	import {
		onShow
	} from "@dcloudio/uni-app"
	const {
		t
	} = useI18n()
	provide("repage", repage);
	// 父级关闭活动的方法
	const clhd = inject("setshowindex");
	let hdc = ref("hdpagein")

	function repage() {
		hdc.value = "hdpageout";
		setTimeout(function() {
			clhd(0);
		}, 300)
	}
	let list = ref([])
	onShow(function() {
		list.value = getApp().globalData.userInfo.vipinfo.vips
	})
</script>

<style scoped lang="scss">
	.v2box {
		padding: 20rpx;

		&-ib {
			background: #00561D;
			border-radius: 20rpx;
			padding: 40rpx 20rpx 20rpx;
			margin-bottom: 20rpx;

			&-djpic {
				width: 80rpx;
				height: 80rpx;
				margin-right: 8rpx;
			}

			&-lwpic {
				width: 24rpx;
				height: 24rpx;
				margin-right: 8rpx;
			}

			&-btn1 {
				width: 212rpx;
				height: 76rpx;
				background: #FFBE32;
				border-radius: 16rpx;
				font-size: 26rpx;
				color: #000000;
			}

			&-btn2 {
				width: 212rpx;
				height: 76rpx;
				background: #7C631A;
				border-radius: 16rpx;
				font-size: 26rpx;
				color: #000000;
			}


			&-jdt {
				width: 316rpx;
				height: 12rpx;
				background: #000000;
				border-radius: 100rpx;
				position: relative;

				&-mt {
					position: absolute;
					left: 0;
					top: 0;
					height: 12rpx;
					background: #FFBE32;
					border-radius: 100rpx;
				}
			}

			&-infobox {
				background: #003311;
				border-radius: 12rpx;
				padding: 30rpx 20rpx;
				font-size: 24rpx;

				&-fgx {
					height: 2rpx;
					background: linear-gradient(90deg, #060C32 0%, #2D3F9D 50%, #110000 100%);
				}
			}
		}
	}
</style>